<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>采购基本信息</span>
                <div style="float: right;">
                    <el-button size="small" @click="onClose">取 消</el-button>
                </div>
            </div>
            <table class="custom-table">
                <tr><td class="tr-title">项目名称</td><td>{{details.name}}</td>
                    <td class="tr-title">供应商数量</td><td>
                       <!--  {{ purchaseSupplier == null ? details.quoteNum:'--'}} -->
                       {{details.quoteNum}}
                    </td>
                </tr>
                <tr><td class="tr-title">申请时间</td><td>{{details.createTime | formatLen}}</td><td class="tr-title">开标时间</td><td>{{details.openTime | formatLen}}</td></tr>
                <tr><td class="tr-title">收货人</td><td>{{details.receiverName}}</td><td class="tr-title">收货人电话</td><td>{{details.receiverPhone}}</td></tr>
                <tr><td class="tr-title">收货地址</td><td colspan="3">{{details.address}}</td></tr>
                <tr><td class="tr-title">采购原因</td><td colspan="3">{{details.reason}}</td></tr>
            </table>
          </el-card>
          
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>采购物资</span>
            </div>
            <el-table :data="tableData" style="width: 100%;" stripe>
                <el-table-column prop="name" label="物资名称"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column prop="purchasedNum" label="采购数量"></el-table-column>
                <el-table-column prop="skuInfo" label="备注" width="200"></el-table-column>
            </el-table>
          </el-card>

          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>报价情况</span>
                <!--审核过才可以看-->
                <template v-if="row.status >= '4'">
                    <template v-if="bidPirceState >=2"><!--供应商中标 和 其他角色可以查看-->
                        <label style="float: right;">中标价：{{details.winningMoney/100}}</label>
                    </template>
                </template>
                
            </div>
            <el-table :data="supplierEnrollTableData" style="width: 100%;" stripe>
                <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
                <el-table-column prop="quoteAmount" label="评估价"></el-table-column>
                <el-table-column prop="quoteOrderFile" label="报价单">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" v-if="scope.row.quoteOrderFile" @click="fileDownloadOther(scope.row.quoteOrderFile)">下载</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="qualification" label="资质">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" v-if="scope.row.qualification" @click="fileDownloadOther(scope.row.qualification)">下载</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="supplierId" label="是否中标">
                    <template slot-scope="scope">
                        <template v-if="scope.row.supplierId === row.winningSupplierId">
                            <el-tag type="success">已中标</el-tag>
                        </template>
                        <template v-else>
                            <el-tag type="warning">未中标</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="remarks" label="备注" width="200"></el-table-column> -->
                <el-table-column label="操作" width="80" v-if="row.status > '3'">
                    <template slot-scope="scope">
                        <!---是供应商  并且匹配是否中标 才能查看报价-->
                        <template v-if="purchaseSupplier != null">
                            <template v-if="scope.row.supplierId === row.winningSupplierId">
                                <el-button type="text" size="mini" @click="getQuoteList(scope.row)">报价明细</el-button>
                            </template>
                        </template>
                        <!---其他角色可以查看-->
                        <template v-else-if="purchaseSupplier == null">
                            <el-button type="text" v-if="isBtn" size="mini" @click="getQuoteList(scope.row)">报价明细</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
          </el-card>

          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>采购单位</span>
            </div>
            <table class="custom-table">
                <tr><td class="tr-title">单位名称</td><td>{{dept.unitName}}</td><td class="tr-title">单位电话</td><td>{{dept.unitPhone}}</td></tr>
                <tr><td class="tr-title">电子邮件</td><td>{{dept.email}}</td><td class="tr-title">联系电话</td><td>{{dept.concatPhone}}</td></tr>
                <tr><td class="tr-title">公司地址</td><td colspan="3">{{dept.address}}</td></tr>
            </table>
          </el-card>

          <el-dialog title="报价明细" :visible.sync="priceVisible" width="1300px" append-to-body>
             <el-table :data="tablePriceData" show-summary style="width: 100%;" stripe>
                <el-table-column prop="code" label="物资编码"></el-table-column>
                <el-table-column prop="name" label="物资名称"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column prop="unitPrice" label="单价"></el-table-column>
                <el-table-column prop="purchasedNum" label="采购数量"></el-table-column>
                 <el-table-column prop="totalPrice" label="合计金额"></el-table-column>
                <el-table-column prop="remarks" label="备注" width="350"></el-table-column>
            </el-table>
        </el-dialog>
  
    </div>
</template>

<script>
import moment from 'moment'
import { bidPurchaseDetails,bidPurchaseInquiryInvitationEnrollDetails } from "@/api/purchase_api"
export default {
    props: ['row'],
    data() {
        return {
            pdfUrl:'',
            tableData:[],
            tablePriceData:[],//供应商报价明细 从列表获取
            priceVisible:false,
            supplierEnrollTableData:[],
            details:{},
            dept:{},
            // 判断供应商中标后 显示中标价，否则不显示
            bidPirceState:'' //  1代表未审核和未中标 2是已审核  3代表其他角色 都可以查看
        };
    },
    filters: {
        formatLen(value) {
            if (!value) {
                return ''
            }
            return moment(value).format("YYYY-MM-DD  HH:mm:ss")
        }
    },
    computed: {
        purchaseSupplier() {
            return this.$store.getters.permission_user.purchaseSupplier;
        },
        isBtn(){
            const btns = this.$store.getters.permission_btns;
            return btns.includes('inquiryBidSupplierPriceDetailed');
        }
    },
    created(){
        this.getBidDetails();
        if(this.row.status >= '3'){//大于3以上 说明已经报价 可以查看报价信息
            this.supplierEnrollDetails();//供应商报价明细
        }
    },
    methods: {
        async getBidDetails(){
            const {code,data} = await bidPurchaseDetails(this.row.id);
            if(code === 200){
                this.details = data;
                this.tableData = data.purchaseGoodsDetail !== '' ? JSON.parse(data.purchaseGoodsDetail) : [];//物资列表
                this.dept = data.dept;//采购单位
               // this.pdfUrl = `${process.env.VUE_APP_FILE}${this.details.files}`
            }
        },
        async supplierEnrollDetails(){
            const {code,data} = await bidPurchaseInquiryInvitationEnrollDetails(this.row.id);
            if(code === 200){

                data.forEach(v=>{
                    v.quoteAmount = (v.quoteAmount/100);
                })
                
                //如果是供应商只能看自己的  其他角色可以看全部
                const supplier = this.$store.getters.permission_user.purchaseSupplier;
                if(supplier !== null){
                    //如果当前状态是未评审  需要清空中标供应商信息  必须等评审通过以后才能看到中标信息
                    
                    if(this.row.status === '3'){
                        //列表中匹配当前登陆供应商的数据
                        this.supplierEnrollTableData = data.filter(v=> v.supplierId===supplier.id);
                        this.supplierEnrollTableData.forEach(v=>{
                            v.supplierId = '';
                            
                        })
                        this.bidPirceState = 1;//未审核
                    }else{
                        //列表中匹配当前登陆供应商的数据
                        this.supplierEnrollTableData = data.filter(v=> v.supplierId===supplier.id);
                        this.supplierEnrollTableData.forEach(v=>{
                            //列表中匹配的供应商数据 和 外层列表中中标id进行比对 如果中标需要显示中标价 反之不显示
                            if(v.supplierId===this.row.winningSupplierId){
                                 this.bidPirceState = 2;//已审核 已中标
                            }else{
                                this.bidPirceState = 1;//已审核 默认未中标
                            }
                        })
                    }
                }else{
                    this.bidPirceState = 3;//其他角色 不限制中标价查看
                    //如果当前状态是未评审  需要清空中标供应商信息  必须等评审通过以后才能看到中标信息
                    if(this.row.status === '3'){
                        this.supplierEnrollTableData = data;
                        this.supplierEnrollTableData.forEach(v=>{
                            v.supplierId = '';
                        })
                    }else{
                        this.supplierEnrollTableData = data;
                    }
                }
            }
        },
        fileDownloadOther(pdfUrl){
            if(!pdfUrl){return;}
            var form = document.createElement('form');
            form.action =  `${process.env.VUE_APP_FILE}${pdfUrl}`;
            form.target = '_blank';
            form.method = 'get';
            document.body.appendChild(form);
            form.submit();
        },
        fileDownload(){
            const pdfUrl = this.details.files;
            if(!pdfUrl){return this.$message.error('没有可下载的文件');}
            var form = document.createElement('form');
            form.action = `${process.env.VUE_APP_FILE}${this.details.files}`;
            form.target = '_blank';
            form.method = 'get';
            document.body.appendChild(form);
            form.submit();
        },
        getQuoteList(row){
            this.tablePriceData = row.quoteDetail !== '' ? JSON.parse(row.quoteDetail):[];
            this.tablePriceData.forEach(v=>{
                v.unitPrice = (v.unitPrice/100);
                v.totalPrice = (v.totalPrice/100);
            })
            this.priceVisible = true;
        },
        onClose() {
            this.$emit("on-cancel-click","details");
        }
    }
};
</script>
    
    